<!--zml 微信广告  2017-12-26-->
<template>
    <section>
        <!--全部工具条 start -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true"  @submit.native.prevent :model="Filters">
                <el-form-item label="">
                    <el-input v-model="Filters.name" placeholder="广告名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="Filters.status" placeholder="广告位置">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="bb" value=1></el-option>
                        <el-option label="aa" value=0></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    选择日期
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="Filters.startDate"
                            type="date"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions1"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>至</el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="Filters.endDate"
                            type="date"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions1"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" v-on:click="handleList()" icon="el-icon-search" place>搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button type="danger" @click="batchStatus" :disabled="this.sels.length===0" icon="el-icon-delete">删除</el-button>
                    <router-link to='/wechat/add-advert'>
                        <el-button type="primary" icon="el-icon-plus">新增</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </el-col>
        <!--全部工具条 end -->

        <!--全部订单列表 start-->
        <el-table :data="advertList" @selection-change="selsChange" highlight-current-row style="width: 100%;">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="ad_id" label="编号">
            </el-table-column>
            <el-table-column prop="name" label="广告名称">
            </el-table-column>
            <el-table-column prop="type" label="广告位置">
            </el-table-column>
            <el-table-column prop="full_image" label="广告图片" width="160px">
                <template slot-scope="scope">
                    <a :href="scope.row.full_image" target="_blank"><img :src="scope.row.full_image" class="list-brand-image"/></a>
                </template>
            </el-table-column>
            <el-table-column prop="start_date" label="开始时间">
            </el-table-column>
            <el-table-column prop="end_date" label="到期时间">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status==1" :disabled="false" :active-value="true" :inactive-value="false"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序值" width="100">
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <span class="color-blue pointer"><router-link :to="'/wechat/edit-advert/'+scope.row.ad_id">编辑</router-link></span>
                    <span class="color-blue pr-3 pointer" @click="editSort(scope.row)">排序</span>
                    <span class="color-blue pointer"  @click="deleteAdvert(scope.row)" >删除</span>
                </template>
            </el-table-column>
        </el-table>
        <!--列表 end-->

        <!-- 分页 start-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="Filters.pageSize"
                           @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total">
            </el-pagination>

        </el-col>
        <!-- 分页 end -->

        <!--编辑界面-->
        <el-dialog title="" :visible.sync="editFormVisible" width="30%" :close-on-click-modal="false">
            <div slot="title" class="dialog-title">更改排序值</div>
            <el-form :model="editForm" label-width="0px" ref="editForm">
                <el-form-item label="" prop="sort">
                    <el-input v-model="update_sort" auto-complete="off" autofocus></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
  import { getAdvertList, manyDeleteadvert, uploadAdvertImg, addAdvert, editAdvert, deleteAdvert } from '../../api/api'

  export default {
    data () {
      return {
        //  dataPicker 日期选择器
        pickerOptions1: {
          shortcuts: [
            {
              text: '今天',
              onClick (picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一个月前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', date)
              }
            },
            {
              text: '三个月前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', date)
              }
            }
          ]
        },
        Filters: {
          name: '',
          status: null,
          startDate: null,
          endDate: null,
          pageSize: 10,
          page: 1
        },
          editForm: {
              ad_id: null,
              name: '',
              type: null,
              start_date: '',
              end_date: '',
              image_path: '',
              url: '',
              to_category: null,
              status: null,
              sort: null
          },
        ids: [],
        sels: [], // 列表选中列
        update_sort: null,
        update_status: null,
        total: 0,
        editFormVisible: false,
        editLoading: false,
        advertList: [],
        visible: {
          listLoading: false,
          allList: true,
        }
      }

    },
    computed: {

        },
    methods: {
    handleCurrentChange (val) {
      this.Filters.page = val;
      this.getOptionList();
    },
    // 条数改变
    handleSizeChange (size) {
      this.Filters.pageSize = size;
      this.getOptionList();
    },
    editSort (row) {
      this.editFormVisible = true;
      this.update_sort = row.sort
      this.editForm = Object.assign({}, row);
    },
    editSubmit () {
        this.editForm.sort = this.update_sort
        editAdvert(this.editForm).then((res) => {
            this.editFormVisible = false;
            // NProgress.done();
            if (parseInt(res.status) === 1) {
                this.$message({
                    message: '提交成功',
                    type: 'success'
                });
            } else {
                this.$alert('更改失败', '失败', {type: 'error'});
            }
            this.handleList();
        });
    },
    handleList () {
        this.visible.listLoading = true
          getAdvertList(this.Filters).then(res => {
              if (parseInt(res.status) === 1) {
                this.advertList = res.data
                this.total = res.totalCount;
              }
              this.visible.listLoading = false
            })
        },
      deleteAdvert (row) {
        this.$confirm('确定要删除<' + row.name + '>吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteAdvert(row.ad_id).then(res => {
            if (parseInt(res.status) === 1) {
              this.handleList();
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              this.$alert('删除失败', '失败', {type: 'error'});
            }
          })
        })
      },
        selsChange (sels) {
            this.ids = [];
            this.sels = sels;
            for (let i = 0; i < sels.length; i++) {
                this.ids.push(JSON.stringify(this.sels[i].ad_id));
            }
        },
        // 批量删除
        batchStatus () {
            this.$confirm('确认删除选中规格吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                // NProgress.start();
                let para = {};
                console.log(para);
                para.ids = this.ids;
                manyDeleteadvert(para).then((res) => {
                    this.listLoading = false;
                    // NProgress.done();
                    if (parseInt(res.status) === 1) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    } else {
                        this.$alert('删除失败', '失败', {type: 'error'});
                    }
                    this.handleList();
                });
            }).catch(() => {
            });
        }
    },

    mounted () {
      this.handleList()
    },
    watch: {}
  }
</script>
<style scoped rel="stylesheet/sass" lang="sass">
        a
         color: #409EFF
         cursor: pointer
         margin-right: 20px
         text-decoration: none
        .click-detail
            color: #409EFF
            cursor: pointer
        .click-detail:hover
            color: #443dff
        .list-brand-image
            width: 100px
            height: 50px
            vertical-align: middle
            margin: 0 0
</style>

